<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
    <span class="title">我的博客系统</span>
    <!--这个spacer用来占位 -->
    <span class="spacer"></span>
    <a href="blog_list.html">主页</a>
    <a href="blog_edit.html">写博客</a>
    <a href="#">注销</a>
    </div>
    <!-- 页面主体 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <!-- 用这个.card 来表示用户信息 -->
        <div class="card">
            <img src="image/cat.jpg" alt="">
            <h3>岑迹</h3>
            <a href="#">gitee地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>3</span>

            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
        <!-- 这个div里来放博客的内容 -->
        <div class="blog-content">
            <!-- 博客标题 -->
            <h3>我的第一篇博客</h3>
            <!-- 博客时间 -->
            <div class="date">2023-11-22 12:00:00</div>
            <!-- 博客正文 -->
            <div class="article">
                                                          
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                    Lorem ipsum dolor</p>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                        Lorem ipsum dolor</p>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                            Lorem ipsum dolor</p>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                Lorem ipsum dolor</p>
                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                    Lorem ipsum dolor</p>
                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium veritatis excepturi ullam! Sint deserunt eaque voluptatum minima ullam? Porro exercitationem, provident quas mollitia voluptas ea dolores unde dignissimos! Unde, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae dicta ab doloribus ipsam tempore dolorum facere nobis, nemo reprehenderit quos consequatur quas nam laboriosam vero libero earum delectus! Praesentium, nesciunt.Lorem
                                        Lorem ipsum dolor</p>
                
           </div>


        </div>
        
    </div>


</div>
    
</body>
</html>